<template>
  <div class="terminal-risk">
    <!-- 左侧 -->
    <div class="ter-left">
      <img
        src="../../assets/images/img_internet.png"
        alt=""
        class="left-image"
      />
    </div>
    <!-- 中间 -->
    <div class="ter-center">
      <!-- 首行 -->

      <span style="font-size: 1.25rem; "
        >{{information.title}}</span
      >
      <p style="color: #2bdbe3; margin: 10px 0"  v-show="information.IP">IP:{{ information.IP }}</p>
      <p style=" margin: 10px 0 0;font-size: .875rem">MAC:{{ information.MAC }}</p>

    </div>
    <!-- 右侧 -->
    <div class="ter-right">
      <div v-for="(item,index) in information.events" :key="index">
        <div class="single-image">
          <img :src="require('@/assets/images/'+ (item=='违规'?'high_risk.png':item=='告警'?'moderate_risk.png':item=='异常'?'low_risk.png':'no_risk.png'))" alt="">
          <p>{{item}}</p>
        </div>
      </div>
  
    </div>
  </div>
</template>

<script>
export default {
  props: {
    information: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style lang="scss" scoped>
.terminal-risk {
  width: 100%;
  height: 22%;
  border-radius: .2rem;
  background-color: rgba(15,27,122,.5);

  padding: 1.25rem;

  display: flex;
  align-items: center;
  .ter-left {
    width: 14%;
    margin-right: .9375rem;
    .left-image {
      width: 100%;
    }
  }
  .ter-center {
    text-align: left;
    width: 49%;
    border-right: 1px solid rgba(54, 94, 255, 0.1);
    margin-right: .625rem;
  }
  .ter-right {
    flex: 1;
    display: flex;
    align-items: center;

    justify-content: space-between;
    .single-image {
      width: 80%;
      height: 100%;

      img {
        width: 100%;
        margin-bottom: 5px;
      }
    }
  }
}
</style>